import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import service from '../api';

interface Props {}

function EcharThree(props:Props) { 

    var [ xAxis,setXAxis] = useState([])
    var [ yData,setYData] = useState([])
    var myChart:any = null

    var request_data = async () =>{
        var res = await service.data.data_simpleData()
        console.log(res.data);
        var xAxis = res.data.data.map((item:any)=>item.x)
        var yData = res.data.data.map((item:any)=>item.val)
        setXAxis(xAxis)
        setYData(yData)
        // 绘图
        myChart.setOption({
          title: {
            text: '嗨购月注册用户量',
            left:'center',
            top:20
          },
          tooltip: {},
          legend: {
            top:20,
            orient: 'vertical',
            left:10,
            data: [xAxis[0], xAxis[1], xAxis[2], xAxis[3], xAxis[4],xAxis[5],xAxis[6]]
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              data: [
                { value:yData[0] , name: xAxis[0] },
                { value:yData[1] , name: xAxis[1] },
                { value:yData[2] , name: xAxis[2] },
                { value:yData[3] , name: xAxis[3] },
                { value:yData[4] , name: xAxis[4] },
                { value:yData[5] , name: xAxis[5] },
                { value:yData[6] , name: xAxis[6] },
              ]
            }
          ]
      });
    }

    // 实例化echarts 
    useEffect(()=>{
        // 请求数据
        request_data()
        // 基于准备好的dom,初始化echarts实例
        myChart =  echarts.init(document.getElementById('echar') || document.body);
    },[])
    return (
        <div className='echarThree'>
            <div id='echar' style={{width:680,height:380}}></div>
        </div>
    );
}

export default EcharThree;